<template>
  <div>
    <div class="tabBox">
      <div
        :class="{ 'tab-item': true, active: n == index }"
        v-for="(item, index) in cateArr"
        :key="index"
        @click="changeList(index)"
      >
        {{ item }}
      </div>
    </div>
    <v-list :list=list></v-list>
  </div>
</template>

<script>
import { reqHomegoods } from "../../../http/http";
export default {
  data() {
    return {
      cateArr: ["热门推荐", "上新推荐", "所有推荐"],
      arr: [],
      n: 0,
      list: [],
    };
  },
  mounted() {
    this.getGoodsList();
  },
  methods: {
    async getGoodsList() {
      let { data: res } = await reqHomegoods();
      if (res.code == 200) {
        console.log(res);
        this.arr = res.list;
        this.list = this.arr[this.n]["content"];
        console.log(this.arr);
      }
    },
    changeList(i) {
      this.n = i;
      this.list = this.arr[this.n]["content"];
    },
  },
};
</script>

<style scoped lang="less">
.tabBox {
  margin: 0.2rem 0;
  display: flex;
  text-align: center;
  .tab-item {
    flex: 1;
    height: 0.7rem;
    line-height: 0.7rem;
    font-weight: 700;
    &.active {
      background-color: orange;
      color: white;
    }
  }
}
</style>